/**
 * Created by GUO on 2017/5/22.
 * @flow
 */


import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    ActivityIndicator,
    Platform,
    WebView,
} from 'react-native';
import BaseScreen from '../BaseScreen';
import HttpClient from '../HttpClient';
import makeHtml from './makeHtml';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    barButtonContainer:{
        flexDirection:'row'
    },
    titleBarIcon:{
        paddingHorizontal:10,
    }
});

const makeTitleBarButtons = ()=> {
    let shareButton = (<Icon
        name="share"
        size={24}
        color="white"
        style={styles.titleBarIcon}/>);

    let messageButton = (<Icon
        name="message"
        size={24}
        color="white"
        style={styles.titleBarIcon}/>);


    let moreButton = (<Icon
        name={Platform.select({ios:'more-horiz',android:'more-vert'})}
        size={24}
        color="white"
        style={styles.titleBarIcon}/>);

    return Platform.select({
        ios:{headerRight:moreButton},
        android:{
            headerRight:<View style={styles.barButtonContainer}>{shareButton}{messageButton}{moreButton}</View>
        }
    });

};

export default class PostDetailScreen extends BaseScreen{

    static navigationOptions = {
        ...makeTitleBarButtons()
    };

    state = {
        data:null,
        fetching:true,
    };

    render(){
        if(this.state.fetching){
            return <ActivityIndicator/>
        }else if(this.state.data){
            let {content,time,title,feed_title} = this.state.data;

            let body = {
                content,
                title,
                feedTitle:feed_title,
                date:time
            };

            return <WebView
                style = {{padding:0}}
                source = {{html:makeHtml(body)}} />
        }else{
            return <Text>无数据</Text>
        }
    }

    componentDidMount(){
        this._fetchData();
    }

    _fetchData(){
        let { article } = this.props.navigation.state.params;

        HttpClient.get(`/articles/${article.id}.json?need_image_meta=1&type=2`)
        .then(response => {
            this.setState({data:response.data.article,fetching:false})
        })
        .catch(e => {
            console.log(e);
            this.setState({fetching:false})
        });
    }
}

